import React from 'react';
import styles from './index.less';
import World from './World';
import Guiji from './guiji';
import Deck from './deck';
import { Layout, Menu, Breadcrumb } from 'antd';
import 'antd/dist/antd.css';
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
const CountContext = React.createContext();

function Tt() {
  const [map, dispatch] = React.useReducer((state:any,action:string)=>{
    switch (action){
      case 'world':
        // return <World></World>;
        return <Deck></Deck>;
      case 'guiji':
        // return <Guiji></Guiji>;
        return <Deck></Deck>;
        default:
          return state;

    }
  },<World></World>);
  // const [map,setMap]=React.useState(<World></World>);
  // React.useEffect(() => {
  //   if (count =='guiji') {
  //     console.log(count);
  //   } else {
  //     console.log(count);
  //   }
  // });

  // const [ typ,settyp ]=React.useState('world');
  return (
    <Layout>
      <Header className="header">
        <div className={styles.logo} />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
          <Menu.Item
            key="1"
            onClick={() => {
              dispatch('world')
              // setCount('world');
              // setMap(<World></World>);
            }}
          >
            nav 1
          </Menu.Item>
          <Menu.Item
            key="2"
            onClick={() => {
              dispatch('guiji')
              // setCount('guiji');
              // setMap(<Guiji></Guiji>);
            }}
          >
            nav 2
          </Menu.Item>
          <Menu.Item key="3">nav 3</Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '0 50px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <Layout
          className="site-layout-background"
          style={{ padding: '24px 0' }}
        >
          <Sider className="site-layout-background" width={200}>
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%' }}
            >
              <SubMenu
                key="sub1"
                title={
                  <span>
                    <UserOutlined />
                    subnav 1
                  </span>
                }
              >
                <Menu.Item key="1">option1</Menu.Item>
                <Menu.Item key="2">option2</Menu.Item>
                <Menu.Item key="3">option3</Menu.Item>
                <Menu.Item key="4">option4</Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub2"
                title={
                  <span>
                    <LaptopOutlined />
                    subnav 2
                  </span>
                }
              >
                <Menu.Item key="5">option5</Menu.Item>
                <Menu.Item key="6">option6</Menu.Item>
                <Menu.Item key="7">option7</Menu.Item>
                <Menu.Item key="8">option8</Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub3"
                title={
                  <span>
                    <NotificationOutlined />
                    subnav 3
                  </span>
                }
              >
                <Menu.Item key="9">option9</Menu.Item>
                <Menu.Item key="10">option10</Menu.Item>
                <Menu.Item key="11">option11</Menu.Item>
                <Menu.Item key="12">option12</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Content style={{ padding: '0 24px', minHeight: 500 }}>
            {/* <div  className={styles.children} style={{display: 'flex'}}> */}
            <div
              style={{
                width: '100%',
                minHeight: '70vh',
                display: 'flex',
                position: 'relative',
              }}
            >
              {/* <CountContext.provider value={count}>{map}</CountContext.provider> */}
              {map}
            </div>
            {/* </div> */}
          </Content>
        </Layout>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©2018 Created by Ant UED
      </Footer>
    </Layout>
  );
}

export default Tt;




/* global window */
// import React, {Component} from 'react';
// import {render} from 'react-dom';
// import {StaticMap} from 'react-map-gl';
// import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core';
// import DeckGL from '@deck.gl/react';
// import {PolygonLayer} from '@deck.gl/layers';
// import {TripsLayer} from '@deck.gl/geo-layers';

// // Set your mapbox token here
// const MAPBOX_TOKEN = 'pk.eyJ1IjoibGl3ZnRjIiwiYSI6ImNrOTFncXIzdTAzc2QzZXBtZmpleDN5ODAifQ.6HpxHkfUbjikIBr3nMbV4w'; // eslint-disable-line
// // const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
// // Source data CSV

// const DATA_URL = {
//   BUILDINGS:
//     'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/buildings.json', // eslint-disable-line
//   TRIPS: 'H://jsweb//v1umilis//src//pages//trips-v7.json' // eslint-disable-line
// };

// const ambientLight = new AmbientLight({
//   color: [255, 255, 255],
//   intensity: 1.0
// });

// const pointLight = new PointLight({
//   color: [255, 255, 255],
//   intensity: 2.0,
//   position: [-74.05, 40.7, 8000]
// });

// const lightingEffect = new LightingEffect({ambientLight, pointLight});

// const material = {
//   ambient: 0.1,
//   diffuse: 0.6,
//   shininess: 32,
//   specularColor: [60, 64, 70]
// };

// const DEFAULT_THEME = {
//   buildingColor: [74, 80, 87],
//   trailColor0: [253, 128, 93],
//   trailColor1: [23, 184, 190],
//   material,
//   effects: [lightingEffect]
// };

// const INITIAL_VIEW_STATE = {
//   longitude: -74,
//   latitude: 40.72,
//   zoom: 13,
//   pitch: 45,
//   bearing: 0
// };

// const landCover = [[[-74.0, 40.7], [-74.02, 40.7], [-74.02, 40.72], [-74.0, 40.72]]];



// export default class Deck extends Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       time: 0
//     };
//   }

//   componentDidMount() {
//     this._animate();
//   }

//   componentWillUnmount() {
//     if (this._animationFrame) {
//       window.cancelAnimationFrame(this._animationFrame);
//     }
//   }

//   _animate() {
//     const {
//       loopLength = 1800, // unit corresponds to the timestamp in source data
//       animationSpeed = 30 // unit time per second
//     } = this.props;
//     const timestamp = Date.now() / 1000;
//     const loopTime = loopLength / animationSpeed;

//     this.setState({
//       time: ((timestamp % loopTime) / loopTime) * loopLength
//     });
//     this._animationFrame = window.requestAnimationFrame(this._animate.bind(this));
//   }

//   _renderLayers() {
//     const {
//       buildings = DATA_URL.BUILDINGS,
//       trips = DATA_URL.TRIPS,
//       trailLength = 180,
//       theme = DEFAULT_THEME
//     } = this.props;

//     return [
//       // This is only needed when using shadow effects
//       new PolygonLayer({
//         id: 'ground',
//         data: landCover,
//         getPolygon: f => f,
//         stroked: false,
//         getFillColor: [0, 0, 0, 0]
//       }),
//       new TripsLayer({
//         id: 'trips',
//         data: trips,
//         getPath: d => d.path,
//         getTimestamps: d => d.timestamps,
//         getColor: d => (d.vendor === 0 ? theme.trailColor0 : theme.trailColor1),
//         opacity: 0.3,
//         widthMinPixels: 2,
//         rounded: true,
//         trailLength,
//         currentTime: this.state.time,

//         shadowEnabled: false
//       }),
//       new PolygonLayer({
//         id: 'buildings',
//         data: buildings,
//         extruded: true,
//         wireframe: false,
//         opacity: 0.5,
//         getPolygon: f => f.polygon,
//         getElevation: f => f.height,
//         getFillColor: theme.buildingColor,
//         material: theme.material
//       })
//     ];
//   }

//   render() {
//     const {
//       viewState,
//       mapStyle = 'mapbox://styles/mapbox/dark-v9',
//       theme = DEFAULT_THEME
//     } = this.props;

//     return (
//       <DeckGL
//         layers={this._renderLayers()}
//         effects={theme.effects}
//         initialViewState={INITIAL_VIEW_STATE}
//         viewState={viewState}
//         controller={true}
//       >
//         <StaticMap
//           reuseMaps
//           mapStyle={mapStyle}
//           preventStyleDiffing={true}
//           mapboxApiAccessToken={MAPBOX_TOKEN}
//         />
//       </DeckGL>
//     );
//   }
// }




// const Deck = React.memo(function Deck() {
//   const [data, setData] = React.useState();
//   React.useEffect(() => {
//     const fetchData = async () => {
//       const response = await fetch(
//         // 'http://localhost:3333/line',
//         "H://jsweb//v1umilis//src//pages//trips-v7.json",
//       );
//       const adddata = await response.json();
//       console.log('nei:');
//       // console.log(data);
//       await setData(adddata);
//     };
//     fetchData();
//   }, []);

//   _animate() {
//     const {
//       loopLength = 1800, // unit corresponds to the timestamp in source data
//       animationSpeed = 30 // unit time per second
//     } = this.props;
//     const timestamp = Date.now() / 1000;
//     const loopTime = loopLength / animationSpeed;

//     this.setState({
//       time: ((timestamp % loopTime) / loopTime) * loopLength
//     });
//     this._animationFrame = window.requestAnimationFrame(this._animate.bind(this));
//   }

//   _renderLayers() {
//     const {
//       buildings = DATA_URL.BUILDINGS,
//       trips = DATA_URL.TRIPS,
//       trailLength = 180,
//       theme = DEFAULT_THEME
//     } = this.props;

//     return [
//       // This is only needed when using shadow effects
//       new PolygonLayer({
//         id: 'ground',
//         data: landCover,
//         getPolygon: f => f,
//         stroked: false,
//         getFillColor: [0, 0, 0, 0]
//       }),
//       new TripsLayer({
//         id: 'trips',
//         data: trips,
//         getPath: d => d.path,
//         getTimestamps: d => d.timestamps,
//         getColor: d => (d.vendor === 0 ? theme.trailColor0 : theme.trailColor1),
//         opacity: 0.3,
//         widthMinPixels: 2,
//         rounded: true,
//         trailLength,
//         currentTime: this.state.time,

//         shadowEnabled: false
//       }),
//       new PolygonLayer({
//         id: 'buildings',
//         data: buildings,
//         extruded: true,
//         wireframe: false,
//         opacity: 0.5,
//         getPolygon: f => f.polygon,
//         getElevation: f => f.height,
//         getFillColor: theme.buildingColor,
//         material: theme.material
//       })
//     ];
//   }


//       viewState=,
//       mapStyle = 'mapbox://styles/mapbox/dark-v9';
//       theme = DEFAULT_THEME;

//     return (
//       <DeckGL
//         layers={this._renderLayers()}
//         effects={theme.effects}
//         initialViewState={INITIAL_VIEW_STATE}
//         viewState={viewState}
//         controller={true}
//       >
//         <StaticMap
//           reuseMaps
//           mapStyle={mapStyle}
//           preventStyleDiffing={true}
//           mapboxApiAccessToken={MAPBOX_TOKEN}
//         />
//       </DeckGL>
//     );
// });

